import { getTenantList } from '@/pages/Tenant/Tenant/service';
import {
  ProFormInstance,
  ProFormSelect,
  ProFormText,
  StepsForm,
} from '@ant-design/pro-components';
import { Button, Modal } from 'antd';
import { useRef } from 'react';
import { deviceManageBase } from '../utils';
import { DeviceItem, UpdateDeviceItem } from '../types';

interface UpdateDeviceProps {
  device: DeviceItem;
  onSubmit: (values: UpdateDeviceItem) => Promise<void>;
  onCancel: (flag?: boolean) => void;
  modalVisible: boolean;
  visibleHandler: (flag?: boolean) => void;
}
export default (props: UpdateDeviceProps) => {
  const {
    onSubmit: handleUpdate,
    onCancel: handleUpdateModalVisible,
    modalVisible: updateModalVisible,
    device
  } = props;
  const form = useRef<ProFormInstance>();

  return (
    <Modal
      title="编辑设备"
      open={updateModalVisible}
      width={550}
      footer={null}
      centered
      onCancel={() => handleUpdateModalVisible(false)}
      afterClose={() => handleUpdateModalVisible(false)}
    >
      <StepsForm<any>
        formRef={form}
        onFinish={async (values) => {
          const value = {
            ...values,
            belong: String(values.belong),
          };
          handleUpdate(value)
        }}
        submitter={{
          render: (props) => {
            if (props.step === 0) {
              return (
                <>
                  <Button type="primary" onClick={() => props.onSubmit?.()}>
                    下一步
                  </Button>
                </>
              );
            }
            if (props.step === 1) {
              return [
                <Button key="pre" onClick={() => props.onPre?.()}>
                  上一步
                </Button>,
                <Button type="primary" key="goToTree" onClick={() => props.onSubmit?.()}>
                  提交
                </Button>,
              ];
            }
          },
        }}
      >
        <StepsForm.StepForm layout="horizontal" title="设备基本信息" style={{ width: 550 }}>

          <ProFormText
            width={'xl'}
            name="id"
            label="设备id"
            initialValue={device.id}
            hidden={true}
          />

          <ProFormText
            width={'xl'}
            name="device_no"
            label="设备编号"
            placeholder="请输入"
            rules={[{ required: true }]}
            initialValue={device.device_no}
          />
          <ProFormText
            width={'xl'}
            name="road_name"
            label="路段名称"
            placeholder="请输入"
            rules={[{ required: true }]}
            initialValue={device.road_name}
          />
          <ProFormText
            width={'xl'}
            name="brand"
            label="品牌名称"
            placeholder="请输入"
            rules={[{ required: true }]}
            initialValue={device.brand}
          />
          <ProFormSelect
            label={'设备类型'}
            showSearch
            name="type"
            options={deviceManageBase.deviceType.map((item, index) => ({
              value: index + 1,
              label: item,
            }))}
            rules={[{ required: true }]}
            placeholder="请选择设备"
            initialValue={device.type}
          />
          <ProFormSelect
            label={'所属用户'}
            showSearch
            name="tenant_id"
            params={{ page: 1, pageSize: 10 }}
            request={async (params, _props) => {
              const res: any = await getTenantList({ page: params.page, pageSize: params.pageSize });
              if (res)
                return res.data.map((item: { id: any; name: any }, _index: any) => {
                  return {
                    value: item.id,
                    label: item.name,
                  };
                });
            }}
            initialValue={device.tenant_id}
            // rules={[{ required: true }]}
            // placeholder="选择所属企业（如未找到目标企业，请先创建企业）"
          />
        </StepsForm.StepForm>
        <StepsForm.StepForm layout="horizontal" title="联网信息" style={{ width: 550 }}>
          <ProFormSelect
            label={'联网方式'}
            showSearch
            name="network"
            options={deviceManageBase.netWay.map((item, index) => ({
              value: index + 1,
              label: item,
            }))}
            placeholder="请选择联网方式"
            initialValue={device.network}
          />
          <ProFormSelect
            label={'运营商'}
            showSearch
            name="operator"
            options={deviceManageBase.operatUser.map((item, index) => ({
              value: index + 1,
              label: item,
            }))}
            placeholder="请选择运营商"
            initialValue={device.operator}
          />
          <ProFormText width={'xl'} name="net_number" label="流量卡号" placeholder="请输入" initialValue={device.net_number} />
        </StepsForm.StepForm>
      </StepsForm>
    </Modal>
  );
};
